{%- liquid
  case section.settings.background_color
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
    when 'black'
      assign background_color = 'bg-black'
  endcase

-%}
<div class="{{ background_color }}">
  <div class=" {% unless section.settings.enable_full_width %}container{% endunless %}">
    <div class="{{ section.settings.top_space }} {{ section.settings.bottom_space }} ">
      <div style="height: 1px; background-color: {{ section.settings.line_color }};"></div>
    </div>
  </div>
</div>


{% schema %}

{
  "name": "Separation Line",
  "tag": "section",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_full_width",
      "label": "Enable full width",
      "default": false
    }, {
      "type": "header",
      "content": "SPACE"
    }, {
      "type": "select",
      "id": "top_space",
      "label": "Top space",
      "options": [
        {
          "value": "",
          "label": "None"
        }, {
          "value": "pt-1",
          "label": "Small"
        }, {
          "value": "pt-2",
          "label": "Medium"
        }, {
          "value": "pt-5",
          "label": "Large"
        }
      ],
      "default": "pt-2"
    }, {
      "type": "select",
      "id": "bottom_space",
      "label": "Bottom space",
      "options": [
        {
          "value": "",
          "label": "None"
        }, {
          "value": "pb-1",
          "label": "Small"
        }, {
          "value": "pb-2",
          "label": "Medium"
        }, {
          "value": "pb-5",
          "label": "Large"
        }
      ],
      "default": "pb-2"
    }, {
      "type": "header",
      "content": "COLOR"
    }, {
      "type": "color",
      "id": "line_color",
      "label": "Line color",
      "default": "#000"
    }, {
      "type": "select",
      "id": "background_color",
      "label": "Background color",
      "options": [
        {
          "value": "primary",
          "label": "Primary"
        }, {
          "value": "secondary",
          "label": "Secondary"
        }, {
          "value": "inverse",
          "label": "Inverse"
        }, {
          "value": "white",
          "label": "White"
        }, {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "white"
    }
  ],
  "presets": [
    {
      "name": "Separation Line"
    }
  ]
}
{% endschema %}
